<template>
  <div class="numberDiv">
    <div>
      <span :class="{ 'disabled' : quantityNum <= 1}" @click="decrease">-</span>
      <div class="product-count" >{{quantityNum}}</div>
      <span :class="{ 'disabled' : quantityNum >= max}" @click="add">+</span>
    </div>
  </div>       
</template>

<script>
  export default {
    props: {
      max: {
        type: Number,
      },
      quantityNum: {
        type: Number,
        default: 1
      }
    },
    methods: {
      add() {
       // console.log(this.max)
        if (this.quantityNum >= this.max) {
          this.wxAlert("库存不足")
          return
        }
        this.$emit('add')
      },
      decrease() {
        if (this.quantityNum <= 1) {
          this.wxAlert("不能再减去了")
          return
        }
        this.$emit('decrease')
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      },
    }
  }
</script>

<style scoped>
.numberDiv div{
  display: flex; 
  border:　1rpx solid #d9d7d7;
  width: 170rpx;
  height: 50rpx;
  justify-content: space-around;
}
.numberDiv span{
  width: 50rpx;
  font-size: 40rpx;
  color: #e38a8a;
  display: flex;
  justify-content: center;
  align-items: center;
}
 .numberDiv span:first-child{
  color: #9e9e9e;
}
.numberDiv .product-count{
  font-size: 30rpx;
  color: #e38a8a;
  width: 56rpx;
  border-left: 1rpx solid #d9d7d7;
  border-right: 1rpx solid #d9d7d7;
  border-top: 0;
  border-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>